<!-- 两个容器，一个设置高度一个自适应等高 -->
<script lang="ts" setup>
import { message } from 'ant-design-vue'
import { ref, onUnmounted } from 'vue'
const height = ref<number>(50)
const updateHeight = () => {
  height.value += 50
}
onUnmounted(() => {
  message.error('请不要离开')
})
</script>

<template>
  <div class="container">
    <h2>两个盒子一个设置高度，一个自适应等高的实现方式</h2>
  </div>
  <div style="display: flex">
    <h3>case1:flex</h3>
    <a-button type="primary" @click="updateHeight">增加高度</a-button>
  </div>
  <div class="case1">
    <div class="box box1" :style="{ height: height + 'px' }">Box1</div>
    <div class="box box2">Box2</div>
  </div>
  <div class="case2">
    <div class="box box1"></div>
    <div class="box box2"></div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  text-align: center;
}
.case1 {
  margin-top: 10px;
  display: flex;
  padding: 10px;
  border: 1px skyblue solid;
}
.case2 {
  display: flex;
}
.box {
  box-sizing: border-box;
  border: 1px salmon solid;
  padding: 10px;
  transition: all 0.5s ease-in-out;
}
</style>
